<template>
    <div>
        <Loading v-if="loadingShow" />
        <!-- 侧边栏 -->
        <van-sidebar v-model="activeKey">
            <van-sidebar-item
                :title="item.name"
                v-for="item in categoryList"
                :key="item.id"
                @click="add(item.id)"
            />
        </van-sidebar>
        <!-- 右侧边栏 -->
        <div class="rightAside">
            <div class="test"></div>
            <img width="95%" height="140" :src="currentCategory.banner_url" />
            <h5>{{ currentCategory.front_name }}</h5>
            <div class="myTitle">
                {{ currentCategory.name }}
            </div>
            <!-- 最下面的商标 -->
            <van-grid column-num="3">
                <van-grid-item
                    :icon="item.wap_banner_url"
                    :text="item.name"
                    v-for="item in currentCategory.subCategoryList"
                    :key="item.id"
                />
            </van-grid>
        </div>
        <!-- 填补背景的盒子 -->
        <div class="pad"></div>
    </div>
</template>

<script>
import Loading from '../component/Loading.vue'
export default {
    name: 'Category',
    data() {
        return {
            categoryList: [],
            currentCategory: {},
            activeKey: 0,
            loadingShow:true
        }
    },
    components: {
        Loading
    },
    methods: {
        // 点击左侧的 导航栏
        add(id) {
            this.$http
                .get('/catalog/current', {
                    params: {
                        id: id
                    }
                })
                .then(res => {
                    if (res.data.errno != 0) {
                        this.$dialog.alert({
                            message: res.data.errmsg
                        })
                        return
                    }
                    const { currentCategory } = res.data.data
                    this.currentCategory = currentCategory
                })
                .catch(err => {
                    console.log(err)
                })
        }
    },
    created() {
        this.$http
            .get('/catalog/index')
            .then(res => {
                if (res.data.errno != 0) {
                    this.$dialog.alert({
                        message: res.data.errmsg
                    })
                    return
                }
                console.log(res.data)
                const { categoryList, currentCategory } = res.data.data
                this.categoryList = categoryList
                this.currentCategory = currentCategory
                this.loadingShow = false
                console.log(this.currentCategory)
            })
            .catch(err => {
                console.log(err)
            })
    }
}
</script>

<style scoped>
.rightAside {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 60px;
    background-color: #fff;
    height: 100%;
}
.test {
    width: 100%;
    height: 10px;
}
h5 {
    color: #fff;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 222;
    text-align: center;
}
.rightAside img {
    box-shadow: 0 0 6px #000;
    margin: 0 7px;
    filter: brightness(0.5);
}
.myTitle {
    text-align: center;
    width: 100%;
    height: 50px;
    font-size: 18px;
    padding: 20px 0 0 0;
    font-weight: 400;
    color: black;
}
.pad {
    position: absolute;
    left: 0;
    background-color: #fff;
    width: 60px;
    height: 80px;
}
</style>